Presentación

Column

Bienvenida a esta plataforma de acceso público

MRSE-H de la EPS Ilo S.A.

EPS Ilo S.A. realiza implementación del Plan de Intervención los MRSE en la Comunidad Campesina de Asana con la finalidad de conservación y recuperación de los Servicios Ecosistémicos Hídricos.

Equipo MRSE

Column

NOSOTROS

Imagen 1 Imagen 2 Imagen 3

Puedes comunicarte con nosotros a través del correo:

MAPA WEB

DIAPOSITIVAS

Precipitación

Column

GRÁFICO DE CALENDARIO

DATOS CRUDOS (DESCARGA)

Column

GRÁFICO DE BARRAS

Column

Precipitación acumulada

83.73 milímetros

Inicio de registro

2023-02-02 14:10:00

Último registro

2023-09-19 11:45:00

INTERVENCIONES

Datos futuros

Column

GRÁFICO DE DATOS DIARIOS

Column

Precipitación acumulada total

83.73 milímetros

Temperatura media

24.97°C

Humedad Relativa media

54.99 %

Rango de mediciones

2023-02-02 14:10:00 al 2023-09-19 11:45:00

Mapa web

Noticias

EL INICIO DE LA IMPLEMENTACIÓN

SUPERVISIÓN DE ZANJAS DE INFILTRACIÓN

VERIFICACIÓN DE INSTALACIÓN DE PLUVIÓMETRO

PARTICIPACIÓN EN PLATAFORMA DE BUENA GOBERNANZA

APROBACIÓN DEL ACUERDO MERESE ANTE EL MINAM

---
title: "MRSE"
output: 
  flexdashboard::flex_dashboard:
    logo: logo.png
    favicon: imagen1.png
    theme:
      version: 4
      bootswatch: cerulean
    storyboard: true
    social: menu
    source: embed
    orientation: columns
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE}
library(flexdashboard)
library(highcharter)
library(tidyverse)
library(xts)
library(plotly)
library(ggthemes)
library(lubridate)
library(vembedr)
library(leaflet)
library(sf)
```


Presentación {data-icon="fa-droplet"}
===

Column {data-width=200}
---
<center>
<!-- ![](https://cdn.www.gob.pe/uploads/campaign/photo/000/001/008/Logo-EALV-sin-fondo.png){width="200"} -->
![](mrse_logo.png){width="85%"}

</center>

### <span style="color:darkblue;font-weight:bold;">Bienvenida a esta plataforma de acceso público</span>

***MRSE-H de la EPS Ilo S.A.***

> EPS Ilo S.A. realiza implementación del Plan de Intervención los MRSE en la Comunidad Campesina de Asana con la finalidad de conservación y recuperación de los Servicios Ecosistémicos Hídricos.

***Equipo MRSE***
<br><br>
<center>

```{r}
embed_youtube("FqETSuNF4ks", height = 215, width = NULL,allowfullscreen = TRUE)
```
</center>

Column {.tabset data-width="500" .tabset-fade}
---

### <span style="color:darkblue;font-weight:bold;">NOSOTROS</span>

<div class="contenedor-imagen">
  <img src="fondo2.jpg" alt="Imagen 1">
  <img src="fondo3.jpg" alt="Imagen 2">
  <img src="fondo4.jpg" alt="Imagen 3">
</div>

<!-- Agrega botones para avanzar y retroceder -->
<button id="anterior">Anterior</button>
<button id="siguiente">Siguiente</button>

<style>
        /* Estilos para el contenedor de la transición */
        .contenedor-imagen {
            width: 100%;
            height: 620px;
            position: relative;
            overflow: hidden;
        }

        /* Estilos para las imágenes */
        .contenedor-imagen img {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* Estilo para mostrar la primera imagen */
        .contenedor-imagen img:first-child {
            opacity: 1;
        }

        /* Estilo para las imágenes anteriores */
        .image-previous {
            opacity: 0.5;
            left: -100%;
        }

        /* Estilos para los botones */
        button {
    margin: 0;
    padding: 10px 20px; /* Aumentamos el padding para un aspecto más moderno */
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo con transparencia */
    color: #fff; /* Color de texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s; /* Efecto de transición */
    outline: none; /* Quitamos el borde al hacer clic */
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Cambio de color al pasar el mouse */
}

        #anterior {
            left: 10px; /* Ajusta la posición horizontal del botón "Anterior" */
        }

        #siguiente {
            right: 10px; /* Ajusta la posición horizontal del botón "Siguiente" */
        }
    </style>

<script>
var currentImage = 0;
var images = document.querySelectorAll('.contenedor-imagen img');
var anteriorButton = document.getElementById('anterior');
var siguienteButton = document.getElementById('siguiente');

// Función para avanzar a la siguiente imagen
function avanzar() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage + 1) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Función para retroceder a la imagen anterior
function retroceder() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage - 1 + images.length) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Manejadores de clic para los botones
anteriorButton.addEventListener('click', retroceder);
siguienteButton.addEventListener('click', avanzar);

// Cambia la imagen automáticamente cada 6 segundos
setInterval(avanzar, 6000);
</script>

<center>
> Puedes comunicarte con nosotros a través del correo: mrse.epsilo@gmail.com
</center>

### <span style="color:darkblue;font-weight:bold;">MAPA WEB</span>

![](felt.png)

### <span style="color:darkblue;font-weight:bold;">DIAPOSITIVAS</span>

```{r}
xaringanExtra::embed_xaringan("m2/pres.html")
```


Precipitación {data-icon="fa-chart-simple"}
===

## Column {data-width="600"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE CALENDARIO</span>


```{r}
# Carga de las bases de datos:
df0 <- read.csv("mayo.csv")[1:6584,-1]

df1 <- read.csv("setiembre.csv",skip = 1)[,-1]
names(df1) <- c("fecha","Precipitacion")

df0 <- df0 %>% 
  mutate(fecha= as.POSIXct(
    paste(fecha,hora,sep=" "),
    format="%Y-%m-%d %H:%M")) %>% 
  select(fecha,Precipitacion)

df1$fecha <- as.POSIXct(
  df1$fecha,format = "%y/%m/%d %H:%M")
# Data completa:
df <- rbind(df0,df1)

# Datos diarios:

df3 <- df %>% mutate(
  fecha = as.Date(fecha, format="%Y-%m-%d"),
  fecha1 = format(fecha, format = "%Y-%m"),
  fecha2 = format(fecha, format = "%m"),
  fecha3 = format(fecha, format= "%d")) %>% 
  group_by(fecha,fecha1,fecha2,fecha3) %>% 
  summarise(Precipitacion= sum(Precipitacion,na.rm=F)) %>% 
  ungroup()

# Gráfico de barras para facetas:
m2 <- df3 %>% ggplot(aes(x=fecha3,y=Precipitacion))+
  geom_bar(stat="identity",fill="turquoise")+
  labs(x="Fecha",y="Precipitación (mm)") + 
  theme_minimal() + theme(plot.title = element_text(size = 14,
    face = "bold", hjust = 0.5),
    plot.subtitle = element_text(size = 12,
    face = "italic", hjust = 0.5),
    legend.position = "none",
    strip.text.x = element_text(colour = "white",face = "bold",
                                family = "helvetica"),
    strip.background = element_rect(
     color="#3182BD", fill="#3182BD",
     size=1.5, linetype="solid"),
    axis.title = element_text(size = 7),
    axis.text.x = element_text(size = 7,
        angle = 90)) +
  facet_wrap(~fecha1,ncol=1)

# gráfico ggplot para cajas:
a1 <- df3 %>% ggplot(aes(x=fecha2,y=Precipitacion))+
  geom_boxplot(color="darkblue",fill="transparent",outlier.shape = NA)+
  labs(x = "Meses",color="Meses",fill="Meses",y="Precipitación (mm)")+
  geom_jitter(size=1.8,alpha=0.4,color="#3182BD",width = 0.15) +
  theme(legend.position = "none")+
  theme_minimal()


####### Calendario

dat_pr <- df3[,c(1,5)]
  names(dat_pr) <- c("date","pr")
  
  dat_pr <- dat_pr %>% 
    complete(date = seq(ymd("2023-02-01"), 
                        ymd("2023-07-31"),"day")) %>%
    mutate(weekday = wday(date, label = T, week_start = 1,
                          locale = Sys.getlocale("LC_TIME")), 
           month = month(date, label = T, abbr = F),
           week = isoweek(date),
           day = day(date))


  dat_pr <- mutate(dat_pr, 
                   week = case_when(month == "December" & week == 1 ~ 53,
                                    month == "January" & week %in% 52:53 ~ 0,
                                    TRUE ~ week))

  
# color ramp
pubu <- RColorBrewer::brewer.pal(9, "PuBu")
col_p <- colorRampPalette(pubu)  
  
# Configuración del tema
theme_calendar <- function(){
    theme(aspect.ratio = 1/2,
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.y = element_blank(),
          axis.text = element_text(
            family = "Montserrat"),
          panel.grid = element_blank(),
          panel.background = element_blank(),
          strip.background = element_blank(),
          strip.text = element_text(
            family = "Montserrat", face = "bold", size = 15),
          legend.position = "top",
          legend.text = element_text(
            family = "Montserrat", hjust = .5),
          legend.title = element_text(
            family = "Montserrat", size = 9, hjust = 1),
          plot.caption =  element_text(
            family = "Montserrat", hjust = 1, size = 8),
          panel.border = element_rect(
            colour = "grey", fill=NA, size=1),
          plot.title = element_text(
            family = "Montserrat", hjust = .5, size = 22,
            face = "bold",margin = margin(
              0,0,0.5,0, unit = "cm")),
          plot.subtitle = element_text(
            family = "Montserrat", hjust = .5, size = 16)
    )
  }
  
# Cambiando las etiquetas de los dias de la semana:
dat_pr$weekday <- factor(
  dat_pr$weekday,
  labels = c("lun\\."="l",
             "mar\\."= "m",
             "mié\\."="mi","jue\\." ="j",
             "vie\\."="v","sáb\\."="s",
             "dom\\."="d"))

n <-   ggplot(dat_pr, 
         aes(weekday, -week, fill = pr)) +
    geom_tile(colour = "transparent",
              size = .4)  + 
    geom_text(aes(label = day),
              size = 1.4, color = "black") +
  scale_fill_gradient(low = "white",
                      high = "#3182BD",na.value = "white")+
  facet_wrap(~ month, nrow = 4,
             ncol = 3, scales = "free") +
  labs(title = "¿Cuánto ha llovido?",
       subtitle = "Precipitación Mensual",
       fill = "Precipitación (mm)") +
  theme_calendar()

ggplotly(n) 
```

### <span style="color:darkblue;font-weight:bold;">DATOS CRUDOS (DESCARGA)</span>

```{r}
data <- df[,c(1,2)]
data$fecha <- as.numeric(data$fecha)*1000-(5*3600*1000)

highchart(type = "stock") %>%
  hc_title(text = "Estación Asana (Datos crudos)") %>%
  hc_xAxis(type = "datetime") %>%
  hc_add_series(data = data, type = "column",
                hcaes(x = fecha, y = Precipitacion),
                name = "Precipitacion", color = "#3182BD") %>%
  hc_exporting(
    enabled = TRUE,
    buttons = list(
      contextButton = list(
        menuItems = c("downloadPNG",
                      "downloadPDF",
                      "separator",
                      "downloadCSV",
                      "downloadXLS",
                      "separator",
                      "resetZoom")
      )
    )
  ) %>% 
  hc_xAxis(type = "datetime", showLastLabel = TRUE,
           dateTimeLabelFormats = list(month = "%B")) %>% 
  hc_tooltip(shared = TRUE, useHTML = TRUE) %>% 
  hc_chart(zoomType = "x")
```



## Column {data-width="350"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE BARRAS</span>

```{r}
ggplotly(p=m2)
```

## Column {data-width="350"}

### Precipitación acumulada
```{r}
valueBox(paste0(sum(df$Precipitacion, na.rm=T)," milímetros"), icon = "fa-droplet")
```

### Inicio de registro

```{r}
valueBox(min(df$fecha), icon = "fa-pencil")
```

### Último registro

```{r}
valueBox(max(df$fecha), icon = "fa-pencil")
```

### <span style="color:darkblue;font-weight:bold;">INTERVENCIONES</span>

<iframe width="100%" height="450" frameborder="0" title="Felt Map" src="https://felt.com/embed/map/MRSE-H-YL2D8IAiQoucf0SETYCFBC?loc=-17.04095,-70.48828,12.2z"></iframe>

Datos futuros {data-icon="fa-chart-simple"}
===

## Column {data-width="600"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE DATOS DIARIOS</span>

```{r}
data <- read.csv("simulados.csv")
data$fecha_hora <- as.POSIXct(
  data$fecha_hora,format="%Y-%m-%d %H:%M")

pp <- data %>% mutate(
  fecha_hora = as.Date(
    fecha_hora, format = "%Y-%m-%d")) %>% 
  group_by(fecha_hora) %>% 
  summarise(precipitacion = sum(precipitacion, na.rm = T)) %>% 
  select(fecha_hora, precipitacion)

s <- data %>% mutate(
  fecha_hora = as.Date(
    fecha_hora, format = "%Y-%m-%d")) %>% 
  group_by(fecha_hora) %>% 
  summarise_if(is.numeric,.funs = mean)

s$precipitacion <- pp$precipitacion

highchart() %>%
  hc_title(text = "Estación Asana (Datos diarios)") %>%
  hc_xAxis(type = "datetime") %>%
  hc_add_series(data = s, type = "line",
                hcaes(x = fecha_hora, y = precipitacion),
                name = "Precipitacion", color = "#3182BD") %>%
  hc_add_series(data = s, type = "line",
                hcaes(x = fecha_hora, y = temperatura),
                name = "Temperatura", color = "hotpink") %>%
  hc_add_series(data = s, type = "line",
                hcaes(x = fecha_hora, y = humedad),
                name = "Humedad", color = "turquoise") %>%
  hc_exporting(
    enabled = TRUE,
    buttons = list(
      contextButton = list(
        menuItems = c("downloadPNG",
                      "downloadPDF",
                      "downloadCSV",
                      "downloadXLS")
      )
    )
  ) %>% 
  hc_xAxis(type = "datetime", showLastLabel = TRUE,
           dateTimeLabelFormats = list(month = "%B")) %>% 
  hc_tooltip(shared = TRUE, useHTML = TRUE) %>% 
  hc_chart(zoomType = "x")
```

## Column {data-width="200"}

### Precipitación acumulada total

```{r}
valueBox(paste0(sum(df$Precipitacion, na.rm=T)," milímetros"), icon = "fa-droplet")

```

### Temperatura media

```{r}
valueBox(paste0(round(mean(s$temperatura, na.rm=T),2),"°C"), icon = "fa-temperature-empty",color = "hotpink")
```

### Humedad Relativa media

```{r}
valueBox(paste0(round(mean(s$humedad, na.rm=T),2)," %"),
         icon = "fa-cloud",color = "turquoise")
```

### Rango de mediciones

```{r}
valueBox(paste(min(df$fecha),max(df$fecha),sep=" al ") , icon = "fa-pencil")
```

### Mapa web

```{r eval=FALSE}
embed_url("https://e.notionhero.io/e1/p/57d29dc-31d5fc890fede99023a3b883131fce2")
```


Noticias {.storyboard data-icon="fa-newspaper"}
===
  
### EL INICIO DE LA IMPLEMENTACIÓN

![](TIME_LINE/F1.png)

### SUPERVISIÓN DE ZANJAS DE INFILTRACIÓN

![](TIME_LINE/F1.1.png)

### VERIFICACIÓN DE INSTALACIÓN DE PLUVIÓMETRO

![](TIME_LINE/F2.png)

### PARTICIPACIÓN EN PLATAFORMA DE BUENA GOBERNANZA

![](TIME_LINE/F3.png)

### APROBACIÓN DEL ACUERDO MERESE ANTE EL MINAM

![](TIME_LINE/F4.png)